<template>
    <div class="action">
        <UniconsSearch />
        <input
            ref="inputRef"
            v-model="query"
            :placeholder="`${i18n.t('search')}...`"
        />
        <AppActionButton
            v-if="!query"
            v-tooltip="i18n.t('newSnippet')"
            class="item"
            @click="onAddNewSnippet"
        >
            <UniconsPlus />
        </AppActionButton>
        <AppActionButton v-else class="item" @click="onReset">
            <UniconsTimes />
        </AppActionButton>
    </div>
</template>

<script setup lang="ts">
import { emitter, onAddNewSnippet } from '@/composable'
import { useSnippetStore } from '@/store/snippets'
import { useDebounceFn } from '@vueuse/core'
import { computed, onUnmounted, ref } from 'vue'
import { i18n } from '@/electron'
import { track } from '@/services/analytics'

const snippetStore = useSnippetStore()

const inputRef = ref<HTMLInputElement>()

const query = computed({
    get: () => snippetStore.searchQuery,
    set: useDebounceFn(async (v) => {
        snippetStore.searchQuery = v
        await snippetStore.setSnippetsByAlias('all')
        snippetStore.search(v!)
        track('snippets/search')
    }, 300)
})

const onReset = () => {
    snippetStore.searchQuery = undefined
    snippetStore.setSnippetsByAlias('all')
}

emitter.on('search:focus', () => {
    inputRef.value?.focus()
})

onUnmounted(() => {
    emitter.off('search:focus')
})
</script>

<style lang="scss" scoped>
.action {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm);
    position: relative;
    top: var(--title-bar-height-offset);
    width: 100%;
    input {
        outline: none;
        border: none;
        width: 100%;
        padding: 0 var(--spacing-xs);
        height: 24px;
        background-color: var(--color-snippet-list);
        color: var(--color-text);
    }
    :deep(svg) {
        flex-shrink: 0;
        fill: var(--color-button-action);
    }
    .item {
        position: relative;
        right: -8px;
    }
}
</style>
